昨天講到Flexbox基礎，那麼今天就繼續下去，主要著重於Grid和CSS過渡效果。

Grid基礎

CSS Grid 是一個用於二維佈局的工具，用於同時控制行和列的排列。

Grid 容器與 Grid 項目：

•通過設置 display: grid; 將一個元素設為 Grid 容器，容器內的元素成為 Grid 項目。
以下舉例他的基本語法：
grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: auto;
}

列與行的定義：

•grid-template-columns：定義網格的列數和寬度。
grid-template-columns: 1fr 2fr;：定義第一列寬度為 1 倍比例單位，第二列為 2 倍。
•grid-template-rows：定義網格的行數和高度。
grid-template-rows: auto 100px;：第一行自動調整高度，第二行高度為 100px。

項目跨行與跨列：

•可以讓 Grid 項目跨越多行或多列：

grid-item {
grid-column: span 2; /* 項目橫跨兩列 /
grid-row: span 2; / 項目橫跨兩行 */
}

網格間距：

•通過 grid-gap 或 gap 屬性來設置網格項目之間的間距：

grid-container {
grid-gap: 10px;
}

過渡效果

CSS 過渡效果可以讓元素的樣式變化變得平滑，而不是立即發生變化。它可以用來創造滑動效果、顏色漸變等動態效果，所以也是有裝飾網頁的效果的。

基本語法

1.property: 想要應用過渡效果的 CSS 屬性，例如 width, height, background-color 等。
2.duration: 過渡效果持續的時間，單位可以是秒（s）或毫秒（ms）。
3.timing-function: 定義過渡的速度曲線（如：ease, linear, ease-in, ease-out 等）。
4.delay: 過渡效果的延遲時間。

常用過渡效果屬性

1.transition-property: 指定要過渡的屬性，或用 all 指定所有屬性。
2.transition-duration: 定義過渡效果持續的時間。
3.transition-timing-function: 定義速度曲線。
4.transition-delay: 定義過渡效果開始的延遲時間。

那今天先到這邊，明天再繼續。可能會進入Javascript。